<template>
  <div class="card">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="140px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item :label="t('system.account.username')" prop="username">
            <el-input v-model="ruleForm.username" />
          </el-form-item>

          <el-form-item :label="t('system.branch.create.password')" prop="password">
            <el-input v-model="ruleForm.password" type="password" show-password />
          </el-form-item>

          <el-form-item :label="t('system.branch.contact_name')" prop="contact_name">
            <el-input v-model="ruleForm.contact_name" />
          </el-form-item>

          <el-form-item :label="t('system.branch.contact_tel')" prop="contact_tel">
            <el-input v-model="ruleForm.contact_tel" />
          </el-form-item>

          <el-form-item :label="t('system.branch.remarks')" prop="remarks">
            <el-input type="textarea" v-model="ruleForm.remarks" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item :label="t('system.branch.name')" prop="branch_name">
            <el-input v-model="ruleForm.branch_name" />
          </el-form-item>

          <el-form-item :label="t('system.branch.branch_role')" prop="branch_role">
            <Role v-model="ruleForm.branch_role" />
          </el-form-item>

          <el-form-item :label="t('system.branch.valid_time')" prop="valid_time">
            <el-date-picker
              v-model="ruleForm.valid_time"
              type="date"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              :clearable="false"
              :disabled-date="disabledDate"
            />
          </el-form-item>

          <el-form-item :label="t('system.branch.logo')" prop="logo">
            <Resources v-model="ruleForm.logo" :type="10" />
          </el-form-item>

          <el-form-item :label="t('system.branch.district_id')" prop="district_id">
            <Map v-model="ruleForm" @change="getData" />
          </el-form-item>

          <el-form-item :label="t('system.branch.attach')" prop="attach">
            <el-input type="textarea" v-model="ruleForm.attach" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="menuEdit">
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { branchCreate } from "@/api/modules/system";
import { useTabsStore } from "@/stores/modules/tabs";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { useI18n } from "vue-i18n";
import Resources from "@/components/Resources/index.vue";
import Map from "@/components/Map/Map.vue";
import Role from "@/components/Role/index.vue";

const { t } = useI18n();
const route = useRoute();
const ruleForm = reactive({
  id: 0,
  username: "",
  password: "",
  remarks: "",
  contact_name: "",
  contact_tel: "",
  valid_time: "",
  branch_role: 0,
  branch_name: "",
  logo: "",
  district_id: 0,
  address: "",
  lat: 0,
  lng: 0,
  attach: ""
});

const getData = data => {
  ruleForm.district_id = data.district_id;
  ruleForm.address = data.address;
  ruleForm.lat = data.lat;
  ruleForm.lng = data.lng;
};

const tabStore = useTabsStore();
const keepAliveStore = useKeepAliveStore();

const ruleFormRef = ref<FormInstance>();

const rules = reactive<FormRules>({
  username: [{ required: true, message: t("system.menu.detail.rule.title"), trigger: "blur" }],
  password: [{ required: true, message: t("system.menu.detail.rule.title"), trigger: "blur" }],
  contact_name: [{ required: true, message: t("system.menu.detail.rule.title"), trigger: "blur" }],
  contact_tel: [{ required: true, message: t("system.menu.detail.rule.title"), trigger: "blur" }],
  valid_time: [{ required: true, message: t("system.menu.detail.rule.title"), trigger: "blur" }],
  branch_role: [{ required: true, message: t("system.menu.detail.rule.title"), trigger: "blur" }],
  branch_name: [{ required: true, message: t("system.menu.detail.rule.branch_name"), trigger: "blur" }],
  district_id: [{ required: true, message: t("system.menu.detail.rule.district_id"), trigger: "blur" }],
  address: [{ required: true, message: t("system.menu.detail.rule.address"), trigger: "blur" }],
  logo: [{ required: true, message: t("system.menu.detail.rule.title"), trigger: "blur" }]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(valid => {
    if (valid) {
      branchCreate(ruleForm).then(response => {
        ElMessage.success(response.message);
        setTimeout(() => {
          if (route.meta.isAffix) return;
          tabStore.removeTabs(route.fullPath);
          keepAliveStore.removeKeepAliveName(route.name as string);
        }, 200);
      });
    } else {
      ElMessage.error(t("common.form_check_error"));
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const disabledDate = date => {
  return date < new Date();
};
</script>
